<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">
        <div class="col-md-10 offset-md-1 col-xs-12">
          <form @submit.prevent="onSubmit">
            <fieldset>
              <fieldset class="form-group">
                <input
                  type="text"
                  class="form-control form-control-lg"
                  placeholder="Article Title"
                  v-model="article.title"
                />
              </fieldset>
              <fieldset class="form-group">
                <input
                  type="text"
                  class="form-control"
                  placeholder="What's this article about?"
                  v-model="article.description"
                />
              </fieldset>
              <fieldset class="form-group">
                <textarea
                  class="form-control"
                  rows="8"
                  placeholder="Write your article (in markdown)"
                  v-model="article.body"
                ></textarea>
              </fieldset>
              <fieldset class="form-group">
                <input
                  type="text"
                  class="form-control"
                  placeholder="Enter tags"
                  v-model="article.tagList"
                />
                <div class="tag-list"></div>
              </fieldset>
              <button
                class="btn btn-lg pull-xs-right btn-primary"
                type="submit"
              >
                Publish Article
              </button>
            </fieldset>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {addArticle,getArticle} from '@/api/article'

export default {
  middleware:'auth',
  name: "EditorIndex",
  async asyncData({params}){
    // console.log(params)
    const {data} = params.slug?await getArticle(params.slug):{data:{article:{tagList:[]}}}
    // console.log(data)
    const {article} = data
    return {article}
  },
  methods:{
    async onSubmit(){
      console.log(this.article)
      this.article.tagList=this.article.tagList.length && this.article.tagList.split(',')
      try {
        const {data} = await addArticle(this.article)
        // console.log(data)
        this.$router.push({
          name: 'article',
          params: {
            slug: data.article.slug,
          },
        })
      } catch (error) {
        console.log(error)
      }
    }
  }
};
</script>